<%--
  Created by IntelliJ IDEA.
  User: 27435
  Date: 2024/11/20
  Time: 15:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        table, th, tr, td {
            padding: 0; /*内边距*/
            margin: 0; /*外边距*/
            border: solid 1px #ccc; /*边框*/
        }
        table {
            width: 800px; /*宽*/
            margin: 50px auto; /*外边距*/
            /*border-collapse: collapse;*/ /*合并边框*/
        }
        td, th {
            text-align: center; /*文字居中*/
        }
        .pages {
            width: 800px; /*宽*/
            height: 40px; /*高*/
            line-height: 40px; /*行高*/
            margin: 0 auto; /*外边距*/
            text-align: center; /*文字居中*/
        }
        .pages a {
            margin-right: 15px; /*右外边距*/
        }
        .pages .active {
            color: red; /*字体颜色*/
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>作者</th>
            <th>价格</th>
            <th>类型</th>
            <th>操作</th>
        </tr>
        <tbody id="bookList">

        </tbody>
    </table>
    <div class="pages">

    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="id" class="form-label">编号</label>
                            <input type="text" class="form-control" id="id" name="id">
                        </div>
                        <div class="mb-3">
                            <label for="name" class="form-label">名称</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>
                        <div class="mb-3">
                            <label for="author" class="form-label">作者</label>
                            <input type="text" class="form-control" id="author" name="author">
                        </div>
                        <div class="mb-3">
                            <label for="price" class="form-label">价格</label>
                            <input type="text" class="form-control" id="price" name="price">
                        </div>
                        <div class="mb-3">
                            <label for="typeId" class="form-label">类型</label>
                            <input type="text" class="form-control" id="typeId" name="typeId">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存更改</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap JS 和 Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
    <script src="js/jquery.js"></script>
    <script>
        var pageNum = 1; // 当前页码

        // 渲染列表
        function createBookList(books){
            $("#bookList").empty(); // 清空tbody
            $.each(books,function (index,book){ // 遍历books
                var tr = $("<tr></tr>"); // 创建一行

                var idTd = $("<td></td>"); // 创建一列
                idTd.text(book.id); // 将book对象的编号写入td中
                tr.append(idTd); // 将idTd追加到tr中

                var nameTd = $("<td></td>"); // 创建一列
                nameTd.text(book.name); // 将book对象的名称写入td中
                tr.append(nameTd); // 将nameTd追加到tr中

                var authorTd = $("<td></td>"); // 创建一列
                authorTd.text(book.author); // 将book对象的作者写入td中
                tr.append(authorTd); // 将authorTd追加到tr中

                var priceTd = $("<td></td>"); // 创建一列
                priceTd.text(book.price); // 将book对象的价格写入td中
                tr.append(priceTd); // 将priceTd追加到tr中

                var typeTd = $("<td></td>"); // 创建一列
                typeTd.text(book.typeId); // 将book对象的类别写入td中
                tr.append(typeTd); // 将typeTd追加到tr中

                var actionTd = $("<td></td>"); // 创建一列
                var updateBtn = $("<input/>") // 创建修改按钮
                var delBtn = $("<input/>") // 创建删除按钮
                updateBtn.attr("type","button").attr("value","修改").attr("class","up_btn")
                         .attr("data-bs-toggle","modal").attr("data-bs-target","#exampleModal"); // 设置修改按钮的属性
                delBtn.attr("type","button").attr("value","删除").attr("class","del_btn"); // 设置删除按钮的属性
                actionTd.append(updateBtn) // 将修改按钮追加到actionTd中
                actionTd.append(delBtn) // 将删除按钮追加到actionTd中
                tr.append(actionTd); // 将actionTd追加到tr中

                // 将这一行追加到tbody中
                $("#bookList").append(tr);
            })
        }

        // 渲染分页
        function createPages(data){
            // data 就是分页信息对象
            $(".pages").empty(); // 清空分页

            // 检查是否有上一页
            if (data.hasPreviousPage) { // 如果有上一页
                // 创建上一页链接元素
                var pre_a = $("<a>上一页</a>")
                // 设置链接的默认行为是跳转到当前页面
                pre_a.attr("href", "#")
                // 为上一页链接添加类名，用于CSS样式定制
                pre_a.attr("class", "pre")
                // 将上一页链接添加到页面的.pages容器中
                $(".pages").append(pre_a)
            }

            // 遍历页面编号数组，生成分页链接
            $.each(data.navigatepageNums, function (index,num){
                // 创建一个新的<a>元素
                var a = $("<a></a>")
                // 设置链接默认属性
                a.attr("href", "#")
                // 根据当前页面编号设置链接的样式
                if (num == data.pageNum) {
                    // 如果是当前页面，则添加 active 类以红色显示
                    a.attr("class", "active a1")
                }else {
                    // 否则，仅添加 a1 类
                    a.attr("class", "a1")
                }
                // 设置链接文本为页面编号
                a.text(num)
                // 将生成的链接添加到 .pages 容器中
                $(".pages").append(a)
            })

            // 检查是否存在下一页
            if (data.hasNextPage) { // 如果有下一页
                // 创建下一页的链接元素
                var next_a = $("<a>下一页</a>")
                // 设置链接的默认行为是跳转到当前页面
                next_a.attr("href", "#")
                // 为下一页添加类名，用于CSS样式定制
                next_a.attr("class", "next")
                // 将下一页链接添加到页面的.pages容器中
                $(".pages").append(next_a)
            }
        }

        // 为类名为"pages"的元素内部的".a1"类元素添加点击事件监听器
        $(".pages").on("click", ".a1", function (even){
            // 阻止默认事件行为，防止页面刷新或跳转
            even.preventDefault();
            // 将点击的元素的文本内容转换为整数并赋值给pageNum变量
            pageNum = parseInt($(this).text());
            // console.log("当前页" + pageNum)
            // 调用getBooks方法，传入当前页码，刷新数据
            getBooks(pageNum)
        })

        // 上一页
        // 为类名为"pages"的元素绑定点击事件，事件针对的是类名为"pre"的子元素
        $(".pages").on("click", ".pre", function (even){
            // 阻止默认事件行为，防止页面刷新或跳转
            even.preventDefault();
            // 减少当前页码值，实现翻页到上一页，并把值赋给pageNum变量
            pageNum = pageNum - 1;
            // console.log(pageNum)
            // 调用getBooks方法，传入当前页码，刷新数据
            getBooks(pageNum)
            // getBooks($(this).attr("pre"))
        })

        // 下一页
        // 为类名为"pages"的元素绑定点击事件，事件针对的是类名为"next"的子元素
        $(".pages").on("click", ".next", function (even){
            // 阻止默认事件行为，防止页面刷新或跳转
            even.preventDefault();
            // 增加当前页码值，实现翻页到下一页，并把值赋给pageNum变量
            pageNum = pageNum + 1;
            // console.log("下一页" + pageNum)
            // 调用getBooks方法，传入当前页码，刷新数据
            getBooks(pageNum)
            // getBooks($(this).attr("next"))
        })

        // 删除数据
        $("#bookList").on("click", ".del_btn", function (even){
            // 阻止默认事件行为
            even.preventDefault();
            // 弹出确认框
            var r = confirm("确定删除吗？")
            // 如果用户取消删除，则不执行后续操作
            if (!r) {
                return;
            }
            // 获取当前点击的删除按钮所在行的第一个子元素（即书籍ID）
            var id = $(this).parent().parent().children(":first").text();
            console.log(id)
            // 调用deleteBookById函数删除指定ID的书籍
            deleteBookById(id);
        })

        // 点击修改按钮，弹出修改框
        $("#bookList").on("click", ".up_btn", function (even){
            // 阻止默认事件行为
            even.preventDefault();
            var id = $(this).parent().parent().children(":first").text();
            // 根据id查询对应的数据，并把数据用bootstrap模态框的形式弹出来，供用户修改，用ajax向servlet请求数据
            $.ajax({
                url: "selectBookById", // 请求的url
                type: "get", // 请求的方式
                dataType: "json", // 预计从服务器返回的数据
                data: "id=" + id, // 发给服务器的数据（id信息）
                success: function (data){
                    // 弹出模态框
                    // 把数据回显到模态框
                    $("#id").val(data.id);
                    $("#name").val(data.name);
                    $("#author").val(data.author);
                    $("#price").val(data.price);
                    $("#typeId").val(data.typeId);
                }
            })
        })

        // 点击按钮进行数据修改，提交数据到servlet，用ajax提交
        $(".btn-primary").click(function (){
            var id = $("#id").val(); // 编号
            var name = $("#name").val(); // 名字
            var author = $("#author").val(); // 作者
            var price = $("#price").val(); // 价格
            var typeId = $("#typeId").val(); // 类型
            // 关闭模态款
            $("#exampleModal").modal("hide")
            $.ajax({
                url: "updateBook", // 请求的url
                type: "post", // 请求的方式
                dataType: "text", // 预计从服务器返回的数据
                data: "id=" + id + "&name=" + name + "&author=" + author + "&price=" + price + "&typeId=" + typeId, // 发给服务器的数据
                success: function (row){
                    // 提示用户
                    alert(row)
                    // 刷新数据
                    getBooks(pageNum)
                }
            })
        })


        /**
         * 根据id删除图书
         * @param id
         */
        function deleteBookById(id){
            $.ajax({
                url: "deleteBook", // 请求的url
                type: "get", // 请求的方式
                dataType: "text", // 预计从服务器返回的数据
                data: "id=" + id, // 发给服务器的数据（id信息）
                success: function (row){
                    alert(row) // 提示用户
                    getBooks(pageNum) // 刷新数据

                    // 检查当前页是否为空
                    var books = $("#bookList tr"); // 获取当前页的所有行元素
                    if (books.length === 1 && pageNum > 1) {
                        getBooks(pageNum - 1); // 如果当前页为空且不是第一页，则跳转到前一页
                    }
                }
            })
        }

        /**
         * 根据页码获取图书列表
         * @param pageNum
         */
        function getBooks(pageNum){
            $.ajax({
                url: "books", // 请求的url
                type: "get", // 请求的方式
                dataType: "JSON", // 预计从服务器返回的数据
                data: "pageNum=" + pageNum, // 发给服务器的数据（页码信息）
                success: function (data){ // 请求成功执行的回调函数
                    // console.log(data)
                    pageNum = data.pageNum; // 更新当前页码
                    createBookList(data.list) // 创建图书列表
                    createPages(data) // 创建分页信息
                }
            })
        }

        // 当文档加载完成后，执行以下函数
        $(function (){
            // 调用getBooks方法，传入当前页码，初始化页面数据
            getBooks(pageNum)
        })
    </script>
</body>
</html>
